<template>
  <div class="header-box">
    <div class="left">
      <div
        @click="$emit('clickHome')"
        class="iconfont icon-shouye color-inverse font-weight-700 font-size-32"
      ></div>

      <div class="member-box">
        <div v-if="!commonStore.isMember" @click="clickNoMember" class="no-member">
          <div class="font-weight-700">未登录会员</div>
          <div class="flex items-center font-size-14">点击绑定></div>
        </div>
        <div v-else class="yes-member">
          <div class="flex items-center ">
            <image mode="aspectFit" :src="member_icon" style="width: 24rpx; height: 24rpx" />
            <div class="m-l-4">150****9177</div>
          </div>
          <div class="flex items-center"> 
            <div>余额 ￥50000.00</div>
            <div class="iconfont icon-guanbi m-l-10 font-20 font-weight-700"></div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="center flex items-center justify-center flex-1 color-inverse font-size-16"
    >
      <div>会员储值</div>
      <div @click="clickShowSearchGoodsPopup" class="m-l-30">商品资料查询</div>
      <div @click="utils.openQianxiang" class="m-l-30">打开钱箱</div>
    </div>
    <div
      class="right flex justify-end items-center font-size-18 font-weight-700 color-inverse"
    >
      <div
        :class="[
          'flex items-center  m-r-50',
          websocketStore.onLine ? 'color-success' : '',
        ]"
      >
        <div
          :class="[
            'iconfont font-size-19 m-r-5',
            websocketStore.onLine ? 'icon-wifi' : 'icon-WIFIjinyong',
          ]"
        ></div>
        <div>{{ websocketStore.onLine ? "在线" : "离线" }}</div>
      </div>

      <div @click="lockDialogRef.switchShow" class="flex items-center m-r-50">
        <div class="iconfont icon-mima font-size-18 m-r-5"></div>
        <div>锁屏</div>
      </div>
    </div>
  </div>
  <MemberLoginPopup ref="MemberLoginPopupRef" />
  <LockDialog ref="lockDialogRef" />
  <GoodsSearchPopup ref="GoodsSearchPopupRef" />
</template>
<script setup>
import member_icon from '@/static/images/member-icon.png'
import { useCommonStore } from '../../store/common';
const commonStore = useCommonStore();
import { useWebSocketStore } from "../../store/websocket";
const websocketStore = useWebSocketStore();

import utils from "@/utils/index";
import { ref } from "vue";

const emit = defineEmits(["clickHome"]);
const lockDialogRef = ref();
const MemberLoginPopupRef = ref()

const GoodsSearchPopupRef = ref();
function clickShowSearchGoodsPopup() {
  GoodsSearchPopupRef.value.open();
}
function clickNoMember() {
  MemberLoginPopupRef.value.open();
}
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18rpx;

  width: 100vw;
  height: 50rpx;
  opacity: 1;
  background: $uni-color-primary;
  box-shadow: 0px 0px 13.33px rgba(0, 0, 0, 0.1);

  .left {
    display: flex;
    align-items: flex-end;
    min-width: 250rpx;
    .icon-shouye {
      background: rgba(0, 0, 0, 0.3);
      width: 60px;
      text-align: center;
      height: 50rpx;
      line-height: 50rpx;
      
    }
    .member-box {
      > div {
        margin-left: 26rpx;
        min-width: 320rpx;
        height: 45rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $uni-text-color-inverse;
        font-size: 16rpx;
        line-height: 24rpx;
      }
      .no-member {
        padding: 12rpx 20rpx;
        // border-radius: 6rpx 6rpx 0 0;
        // border: 1px solid $uni-color-primary;
        // border-bottom: 0;
        // box-shadow: 0px -2rpx 4rpx rgba(0, 0, 0, 0.3);
        background: url("../../static/images/no-member.png") no-repeat center;
      }
      .yes-member {
        background: url("../../static/images/yes-member.png") no-repeat center;

        padding: 12rpx;
      }
    }
  }
  .center {
    line-height: 50rpx;
  }
  .right {
    width: 250rpx;
  }
}
</style>
